<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-edit"></i> 配置管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>收款配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box">
            <el-form ref="edit" style="width:100%" :model="data" label-width="150px">
                <el-form-item label="支付宝" style="width:40%">
                    <el-upload
                        class="upload-demo"
                        ref="addUploads"
                        drag
                        :limit="1"
                        :auto-upload="true"
                        show-file-list
                        accept="image/*"
                        :on-success="uploadSuccess"
                        :on-error="uploadError"
                        :on-preview="uploadPreview"
                        :action="api.upload_img_url"
                        list-type="picture"
                        :on-exceed="uploadExceed"
                        :file-list="data.alpay&&data.alpay!=''?[{name:'预览',url:data.alpay}]:[]"
                        multiple
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或
                            <em>点击上传</em>
                        </div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="微信" style="width:40%">
                    <el-upload
                        class="upload-demo"
                        ref="addUploads"
                        drag
                        :limit="1"
                        :auto-upload="true"
                        show-file-list
                        accept="image/*"
                        :on-success="wxUploadSuccess"
                        :on-error="uploadError"
                        :on-preview="uploadPreview"
                        :action="api.upload_img_url"
                        list-type="picture"
                        :on-exceed="uploadExceed"
                        :file-list="data.wx&&data.wx!=''?[{name:'预览',url:data.wx}]:[]"
                        multiple
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或
                            <em>点击上传</em>
                        </div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="其他二维码" style="width:40%">
                    <el-upload
                        class="upload-demo"
                        ref="addUploads"
                        drag
                        :limit="1"
                        :auto-upload="true"
                        show-file-list
                        accept="image/*"
                        :on-success="otherUploadSuccess"
                        :on-error="uploadError"
                        :on-preview="uploadPreview"
                        :action="api.upload_img_url"
                        list-type="picture"
                        :on-exceed="uploadExceed"
                        :file-list="data.other&&data.other!=''?[{name:'预览',url:data.other}]:[]"
                        multiple
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或
                            <em>点击上传</em>
                        </div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item style="width:40%" label="其他二维码名称">
                    <el-input
                        v-model="data.other_name"
                        type="text"
                        maxlength="50"
                        placeholder="请输入显示的名称"
                    ></el-input>
                </el-form-item>
                <div style="width:100%;display:flex;justify-content:center;">
                    <el-button
                        type="primary"
                        style="margin-top:15px;"
                        @click="saveContent"
                        size="medium "
                    >保 存</el-button>
                </div>
            </el-form>
        </div>
        <!-- 预览图片 -->
        <div class="previews" @click="closePreviews" v-if="windowsPopVisible">
            <img :src="windowsPopUrl" title="点击即可关闭预览" />
        </div>
    </div>
</template>

<script>
import EditorBar from '../../common/wangEnduit';
export default {
  components: { EditorBar },
  name: 'pay',
  data () {
    return {
      windowsPopVisible: false,
      windowsPopUrl: '',
      data: {
        alpay: '',
        other: '',
        wx: '',
        other_name: ''
      },
      getOther () {
        let that = this;
        that.api.requests('getPayConfig', 'GET', {}, function (result) {
          that.data = result.data.info;
        });
      }
    }
  },

  created () {
    this.getOther();
  },

  methods: {
    /***
         * 超出上传限制事件
         */
    uploadExceed () {
      this.$message.error('只能上传一张图片');
    },

    /***
     * 添加banner预览
     */
    uploadPreview (file) {
      this.windowsPopVisible = true;
      this.windowsPopUrl = file.response.data.url;
    },

    /***
     * 关闭预览
     */
    closePreviews () {
      this.windowsPopVisible = false;
    },

    /***
     * 添加banner上传成功事件
     */
    uploadSuccess (response, file, fileList) {
      if (response.code != 1000) {
        this.$message.error(response.msg);
        return false;
      }
      this.data.alpay = response.data.url;
    },
    /***
     * 添加banner上传成功事件
     */
    wxUploadSuccess (response, file, fileList) {
      if (response.code != 1000) {
        this.$message.error(response.msg);
        return false;
      }
      this.data.wx = response.data.url;
    },

    otherUploadSuccess (response, file, fileList) {
      if (response.code != 1000) {
        this.$message.error(response.msg);
        return false;
      }
      this.data.other = response.data.url;
    },

    /***
     * 添加banner上传失败事件
     */
    uploadError (response, file, fileList) {
      this.$message.error('上传失败');
    },

    /**
     * 值变化事件
     */
    contentChange1 (val) {
      this.data.register_protocol = val;
    },
    /**
     * 值变化事件
     */
    contentChange2 (val) {
      this.data.about = val;
    },
    /**
     * 保存事件
     */
    saveContent () {
      this.api.requests('editPayConfig', 'PUT', this.data, res => {
        this.$message.success('保存成功');
      });
    }

  }
}
</script>

<style  scoped>
.form-box {
    min-width: 360px;
    width: 80%;
    min-height: 70vh;
    padding: 2vh 2vh;
    background: #ffffff;
}
.but-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: nowrap row;
    align-items: center;
    justify-content: center;
}
.tips {
    width: auto;
    color: rgb(160, 160, 161);
    font-size: 12px;
}
.tips a {
    color: #70afef;
}
.tips > span {
    color: rgb(233, 142, 154);
}
</style>